<template>
    <div>
        <el-button type="primary" @click="saveCourse">新增课程</el-button>
        <div class="container-content" v-if="courses.length>0">
            <div class="item" v-for="(item,index) in courses" :key="index">
                <!--            调用组件-->
                <Card :width="width">
                    <img :src="item.coverImage" class="image">
                    <div>
                        <span class="time">{{item.theme}}</span>
                        <span class="content">. . . {{item.courseFeatureName}} . . .</span>
                        <span class="address">{{item.baseName}}</span>
                    </div>
                </Card>
                <!--            发布详细等等-->
                <Release @delete="deleteCourse" :item="item" :index="index"/>
            </div>
        </div>
        <!--        分页器-->
        <div class="sys" v-if="courses.length>0">
            <Pagination
                    :path="'/api/Studies_to_travel/course/queryInfoByBaseId'"
                    :item="parameter"
                    :count="count"
                    @transfer="receive"/>
        </div>
        <div class="courses" v-if="courses.length<=0">
            暂无数据，请去添加数据
        </div>
    </div>

</template>

<script>
    import {Button} from "element-ui";
    import Card from "@/components/card/Card";
    import Pagination from "@/components/pagination/Pagination";
    import Release from "../release/Release";
    import {post} from "@/request/AxiosMAX";
    export default {
        name: "StudiesCourseList",
        components:{
            Card,
            Pagination,
            Release,
            "el-button":Button

        },
        data(){
            return {
                width:{width: '240px'},
                courses:[],//结果集
                count:0,//总页数
                //请求参数
                parameter:{
                    baseId:this.$store.state.base.id
                }
            }
        },
        methods:{
            //新增课程
            saveCourse(){
                this.$router.push("/base/studiesCourse/SaveCourse");
            },
            //获取子组件传递过来的值
            receive(item){
                this.count = item.count;
                this.courses = item.data;
            },
            deleteCourse(index){
                this.courses.splice(index,1);
            }
        },
        created() {
            //封装请求参数
            let data = {
                baseId:this.$store.state.base.id,
                startNumber:1,
                pageSize:3
            };
            //根基基地id查询老师
            post("/api/Studies_to_travel/course/queryInfoByBaseId",data).then(
                res=>{
                    if(res.code===0){
                        this.count = res.count;
                        this.courses=res.data;
                    }
                }
            )
        }
    }
</script>

<style scoped>

    .sys{
        display: flex;
        justify-content: space-evenly;
    }
    .container-content:after{
        content:"";
        display:block;
        clear:both;
    }
    /*.container-content {*/

    /*    !*width: 100%;*!*/
    /*    !*overflow: hidden;*!*/
    /*    !*display: flex;*!*/
    /*    !*flex-wrap: wrap;*!*/
    /*}*/
    .item{
        float: left;
        margin-left: 10%;
        margin-top: 5%;
    }
    .time {
        font-size: 14px;
        font-weight: 600;
        color: rgba(80, 80, 80, 1);
        padding-top:20px;
        padding-bottom: 10px;
        text-align: center;
    }
    .content{
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: rgba(80, 80, 80, 1);
        margin-bottom: 10px;
    }

    .address{
        font-size: 14px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: center;
        border-top: rgba(229, 229, 229, 1) solid 1px;
    }
    .image {
        width: 100%;
        height: 160px;
        display: block;
    }
    span{
        display: block;
    }
    .courses{
        padding-top: 10%;
        padding-left: 30%;
        font-size: 40px;
    }
</style>
